<template>
  <div>
  <my-head></my-head>

     <el-col style="width: 100%">
        <el-col style="width: 70%">
          <video id="example-video" style="width:1050px; height:530px"  class="video-js vjs-default-skin vjs-big-play-centered" controls >
            <source
              src="http://rgftqhnnu.hb-bkt.clouddn.com/lg0JmGChGNJjwjaQtTaJ-aoBLnt7"
              type="application/x-mpegURL">
          </video>
        <!--  <input type="button" onClick="switchvideo()" value="switch"/>-->
      </el-col>

       <el-container style="height: 530px; border: 1px solid #eee">
         <el-aside  style="background-color: rgb(238, 241, 246);width: 100%">
        <el-menu
           default-active="1-1-1"
           class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          >
           <el-submenu index="1">
             <template slot="title">
               <i class="el-icon-location"></i>
               <span>课程大纲</span>
             </template>

               <el-submenu v-for="i in count" item="i" :key="i"  index="1-1">
               <template slot="title">第一节课</template>
               <el-menu-item index="1-1-1">项目简介</el-menu-item>
               <el-menu-item index="1-1-2">项目内容</el-menu-item>
             </el-submenu>

           </el-submenu>
         </el-menu>
         </el-aside>
       </el-container>
     </el-col>
    <my-footer></my-footer>
  </div>

</template>
<script src="../../../static/plugins/videojs/video.js"></script>
<script src="../../../static/plugins/videojs/videojs-contrib-hls.js"></script>

<script>
  import videojs from "video.js";
  import "video.js/dist/video-js.css";
  import hls from "videojs-contrib-hls"

  export default {
    data() {
      return {
        count: 1,
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
        console.log(key)
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      load () {
        //this.count += 2
      }
    },
    mounted(){

      console.log(this.$route.params.id)

      var player = videojs('example-video');
      player.src({
        src: 'http://rgftqhnnu.hb-bkt.clouddn.com/lg0JmGChGNJjwjaQtTaJ-aoBLnt7',
        type: 'video/mp4',
        withCredentials: true
      });
      player.play();
    }
  }
</script>
